.icon-list {
  max-height: 500px;
  overflow: auto;

  h3 {
    font-size: 18px;
  }

  .list-ul {
    margin: 10px 0;
    overflow: hidden;
    list-style: none;
    padding-left: 0;

    .list-li {
      position: relative;
      float: left;
      width: 10%;
      height: 82px;
      margin: 3px 0;
      padding: 10px 0 0;
      overflow: hidden;
      color: #555;
      text-align: center;
      list-style: none;
      background-color: #fff;
      border-radius: 4px;
      cursor: pointer;
      transition: color .3s ease-in-out, background-color .3s ease-in-out;

      &:hover {
        .list-icon {
          transform: scale(1.5);
          // background: var(--primary-color);
          // color: #fff;
        }
      }

      .list-icon {
        margin: 12px 0 8px;
        font-size: 36px;
        transition: transform .5s ease-in-out;
        transition: transform .5s ease-in-out, -webkit-transform .3s ease-in-out;
        will-change: transform;
      }
    }

    .actived {
      // border: 1px solid var(--primary-color);
      background: #00c1de;
      background: var(--primary-color);
      color: #fff;
    }
  }
}